<template>
	<!--
	 本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2588
	 uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	 uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	 unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
	 DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
	 -->
	<view>
		<!-- 刷新页面后的顶部提示框 -->
		<!-- <view class="tips" :class="{ 'tips-ani': tipShow }">为您更新了10条最新新闻动态</view> -->
		<!-- <uni-card title="基础信息" style="height: 100%;"> -->
		<!-- 基于 uni-list 的页面布局 -->
		<uni-list>
			<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
			<uni-list-item direction="column" v-for="item in data" :key="item.outorderdtl_id"
				@tap.native="detail(item.outorderdtl_id,item.gross_weight)">
				<!-- 通过header插槽定义列表的标题 -->
				<template v-slot:header>
					<view class="uni-title">订单编号：{{item.outorderhead_number}}</view>
				</template>
				<!-- 通过body插槽定义列表内容显示 -->
				<template v-slot:body>
					<view class="uni-list-box">
						<view class="uni-content">
							<view class="uni-title-sub uni-ellipsis-2">发货重量：{{item.gross_weight}}</view>
							<view class="uni-note">客户信息：{{item.outorderdtl_customer + ' 车牌：'+item.number_plate}}</view>
						</view>
					</view>
				</template>
				<u-gap height="80" bgColor="#bbb"></u-gap>
			</uni-list-item>
		</uni-list>
		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<uni-load-more iconType="auto" :status="status" />
		<!-- </uni-card> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				data: [],
				order: "desc",
				page: 1,
				rows: 30,
				sort: "outorderdtl_createtime",
				wheres: [],
				total: 0,
				status: "more",
				refreshIfNeeded: false
			};
		},
		onLoad() {
			this.load()
		},
		onShow() {
			if (this.refreshIfNeeded) {
				debugger;
				this.refreshIfNeeded = false;
				this.load()
			}
		},
		methods: {
			load(cb) {
				this.$u.post('/api/VV_OutboundOrderInfo/getPageData', {
					order: this.order,
					page: this.page,
					rows: this.rows,
					sort: this.sort,
					wheres: "[{\"name\":\"outorderdtl_station\",\"value\":\"1\",\"displayType\":\"text\"}]"
				}).then(res => {
					// res.rows.forEach(element => {
					// 	if (element.location_state == "LocationState_Free") {
					// 		element.location_state = "空闲"
					// 	} else if (element.location_state == "LocationState_Lock") {
					// 		element.location_state = "预定"
					// 	}
					// });
					cb && cb()
					this.data = [...this.data, ...res.rows]
					// this.total = res.total;
					// if(this.total>=this.data.length){
					// 	this.status="noMore"
					// }else{
					// 	this.status="more"
					// }
				})
			},
			detail(outID, totalOutWeigth) {
				this.$u.route("pages/detail/detail", {
					outID: outID,
					totalOutWeigth: totalOutWeigth
				})
			}
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.page = 1;
			this.rows = 30;
			this.total = 0;
			this.data = []
			this.load(() => uni.stopPullDownRefresh())
			// this.formData.status = 'more'
			// this.$refs.udb.loadData({
			// 	clear: true
			// }, () => {
			// 	this.tipShow = true
			// 	clearTimeout(this.timer)
			// 	this.timer = setTimeout(()=>{
			// 		this.tipShow  = false
			// 	},1000)
			// 	uni.stopPullDownRefresh()
			// })
		},
		/**
		 * 上拉加载回调函数 
		 */
		onReachBottom() {
			if (this.page * this.rows >= this.total) {
				return uni.$showMsg('数据以全部加载完毕!')
			} else {
				this.status = "loading"
				// if (this.isloading) return
				// 让页码值自增+1
				this.page++
				this.load()
				this.status = "more"
			}
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
